<template>
  <div>
    <div class="page-header-index-wide">
      <div
        slot="prevArrow"
        slot-scope="props"
        class="custom-slick-arrow"
        style="left: 10px;zIndex: 1"
      >
        <a-icon type="left-circle" />
      </div>
      <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
        <a-icon type="right-circle" />
      </div>
          <Banner3D/>

      <a-card :bordered="false" :body-style="{padding: '0'}">
        <div class="salesCard">
          <a-tabs
            default-active-key="1"
            size="large"
            :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}"
          >
            <a-tab-pane loading="true" tab="销售额" key="1">
              <a-row>
                <a-col :xl="11" :lg="11" :md="11" :sm="24" :xs="24">
                  <LineChartMultid />
                </a-col>
                <a-col :xl="11" :lg="11" :md="11" :sm="24" :xs="24" style="height: 400px;">
                  <bar :dataSource="barData" />
                </a-col>
                <a-col :xl="11" :lg="11" :md="11" :sm="24" :xs="24">
                  <BarAndLine />
                </a-col>
                <a-col :xl="11" :lg="11" :md="11" :sm="24" :xs="24">
                  <Pie />
                </a-col>
              </a-row>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-card>
    </div>
    
    <company-profile />
  </div>
</template>

<script>
import RouteView from '@/components/layouts/RouteView'
import { mixinDevice } from '@/utils/mixin.js'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import VeLine from 'v-charts/lib/line.common'
import VeRing from 'v-charts/lib/ring.common'
import VeBar from 'v-charts/lib/bar.common'
import VePie from 'v-charts/lib/pie.common'
import VeHistogram from 'v-charts/lib/histogram.common'
import axios from '../../../node_modules/axios/dist/axios'
import UserLayoutlist from '../layouts/UserLayout-list'
import UserLayoutlogin from '../layouts/UserLayout-login'
import LineChartMultid from '../chart/LineChartMultid'
import BarAndLine from '../chart/BarAndLine'
import CompanyProfile from '../knowlage/companyProfile'
import Bar from '../chart/Bar'
import Pie from '../chart/Pie'

import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '../chart/MiniArea'
import MiniBar from '../chart/MiniBar'
import MiniProgress from '../chart/MiniProgress'
import RankList from '../chart/RankList'
import Banner3D from '../../components/Banner3D'


const barData = []
for (let i = 0; i < 12; i += 1) {
  barData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
} 
export default {
  //登录前首页
  name: 'UserLayout',
  components: {
    VeLine,
    VeBar,
    VePie,
    VeRing,
    VeHistogram,
    swiper,
    ACol,
    swiperSlide,
    UserLayoutlist,
    UserLayoutlogin,
    LineChartMultid,
    BarAndLine,
    Bar,
    Pie,
    CompanyProfile,
    Banner3D
  },
  mixins: [mixinDevice],

  data() {
    return {
      swiperOption: {
        notNextTick: true,
        autoplay: true,
        speed: 1000,
        dialogVisible: false,
        loop: true,
        modal1Visible: false,
        pagination: {
          el: '.swiper-pagination'
        },
        
      },
      barData,
      messages: [],
      chartData: {
        columns: ['项目', '展示'],
        rows: [
          { 项目: '病例总数', 展示: 520 },
          { 项目: '应完成', 展示: 400 },
          { 项目: '已完成', 展示: 700 },
          { 项目: '未完成', 展示: 200 },
          { 项目: '即将超期', 展示: 540 }
        ]
      }
    }
  },
  mounted() {
    document.body.classList.add('userLayout')
  },
  beforeDestroy() {
    document.body.classList.remove('userLayout')
  },
  created() {
    //this.$fetch('queryHospitalList').then(response => {
    //this.chartData = response
    //console.log(this.chartData)
    //  })
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }
  p {
    line-height: 42px;
    margin: 0;
    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
.footer-name {
  margin: auto;
  text-align: center;
  margin-top: 80px;
}
.personsum {
  display: flex;

  a-button {
    padding-right: 100px;
  }
  p {
    margin-left: 20px;
    line-height: 2.4;
  }
}
.layout .header {
  background-color: #13c2c2 !important;
}
/deep/ .ant-carousel .slick-dots li button{
  width: 20px;
  height: 5px;
  background-color: #333333;
}
/deep/.ant-carousel .slick-dots li.slick-active button{
  background-color: #38C3C8;
}
.ant-carousel >>> .slick-slide {
    text-align: center;
    background: #364d79;
    overflow: auto;
  }

  .ant-carousel >>> .slick-slide h3 {
    color: #fff;
  }
  .ant-carousel .slick-dots{
    height: 80px;
  }
</style>
